<template>
  <AppNavBar> 地址管理 </AppNavBar>
  <div class="fill"></div>
  <address-list
    v-model="chosenAddressId"
    :list="addressList"
    default-tag-text="默认"
    @add="onAdd"
    @edit="onEdit"
  />
  <empty v-if="!addressList.length" description="暂时还没有收货地址哦！" />
  <ActionSheet v-model:show="showActionSheet" title="添加地址">
    <AddressEdit
      show-set-default
      show-delete
      :area-list="arealist"
      @save="onAddSave"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
    ></AddressEdit>
  </ActionSheet>

  <ActionSheet v-model:show="showEditActionSheet" title="修改地址">
    <AddressEdit
      show-set-default
      show-delete
      :area-list="arealist"
      @save="onEditSave"
      @delete="onEditDelete"
      :address-info="editAddress"
      :area-placeholder="editAddress.address"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
    ></AddressEdit>
  </ActionSheet>
</template>

<script>
import { ref } from 'vue'
import arealist from '@/utils/arealist'
import AppNavBar from '@/components/library/AppNavBar.vue'
import { getAddresses, addAddress, deleteAddress } from '@/api/address'
import { AddressList, Empty, ActionSheet, AddressEdit, Toast } from 'vant'
export default {
  name: 'Address',
  components: { AppNavBar, AddressList, Empty, ActionSheet, AddressEdit },
  setup () {
    const chosenAddressId = ref('1')
    const addressList = ref([])
    // 格式不统一，原始地址数组
    let originalAddresses = null
    // 新增
    const showActionSheet = ref(false)
    // 秀爱
    const showEditActionSheet = ref(false)
    const editAddress = ref(null)

    const init = () => {
      addressList.value = []
      getAddresses().then(res => {
        originalAddresses = res.data.data
        res.data.data.forEach(address => {
          const newAddress = {
            id: address.id,
            name: address.name,
            tel: address.phone,
            address: address.province + ' ' + address.city + ' ' + address.county + ' ' + address.address,
            isDefault: address.is_default === 1
          }
          addressList.value.push(newAddress)
        })
        chosenAddressId.value = addressList.value.find((address) => address.isDefault)?.id
      })
    }
    init()
    // 点击添加时候弹出面板
    const onAdd = () => {
      showActionSheet.value = !showActionSheet.value
    }
    // 编辑时候获得当前地址信息即list中所处的下标
    const onEdit = (item, index) => {
      const oriItem = originalAddresses[index]
      editAddress.value = {
        id: oriItem.id,
        name: oriItem.name,
        tel: oriItem.phone,
        addressDetail: oriItem.address,
        isDefault: oriItem.is_default === 1,
        address: item.address.split(' ').splice(0, 3).join(' ')
      }
      showEditActionSheet.value = true
    }

    // 新增地址保存，获取地址信息
    const onAddSave = async (content) => {
      const address = {
        name: content.name,
        address: content.addressDetail,
        phone: content.tel,
        province: content.province,
        city: content.city,
        county: content.county,
        // 值为1为默认
        is_default: content.isDefault ? 1 : 0
      }
      await addAddress(address)
      init()
      Toast.success('添加成功！')
      showActionSheet.value = false
    }
    // 编辑时候保存
    const onEditSave = (content) => {
      console.log(content)
    }
    // 编辑时候删除
    const onEditDelete = async (content) => {
      await deleteAddress(content.id)
      // 删除后更新本地
      addressList.value = addressList.value.filter(address => address.id !== content.id)
      // 关闭弹出
      showEditActionSheet.value = false
    }
    return {
      onAdd,
      onEdit,
      chosenAddressId,
      addressList,
      showActionSheet,
      arealist,
      onAddSave,
      showEditActionSheet,
      editAddress,
      onEditSave,
      onEditDelete
    }
  }
}
</script>

<style scoped lang='less'>
.fill {
  height: 53px;
}
:deep(.van-address-item .van-radio__icon--checked .van-icon) {
  background-color: #42b983;
  border: 1px solid #42b983;
}
:deep(.van-address-list__bottom) {
  bottom: 65px;
  button {
    background-color: #42b983;
    border: 1px solid #42b983;
  }
}
:deep(.van-button--danger) {
  background-color: #42b983;
  border: 1px solid #42b983;
}
:deep(.van-switch--on) {
  background-color: #42b983;
}
</style>
